/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useEffect, useState,useRef} from 'react';
import { View, Text, StyleSheet, TouchableOpacity,Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import CameraScreen from './src/pages/camera/camera.tsx';
import { useAllPermissions } from './src/pages/camera/usePermissions';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
     const { hasCameraPermission, hasMicrophonePermission, requestAllPermissions,hasCameraPermissions,hasVoicePermissions } = useAllPermissions();
    const navigation = useNavigation();

     useEffect(() => {
         if (!hasCameraPermission || !hasMicrophonePermission) {
           requestAllPermissions();
         }
    }, [hasCameraPermission, hasMicrophonePermission]);


    const handleOpenCamera = async (mode=[]) => {

        const needsMicrophone = mode.includes('NoVoice') ? true : false;
        if (!hasCameraPermission || (needsMicrophone && !hasMicrophonePermission)) {
            await requestAllPermissions()
        }

    if (!hasCameraPermissions() || (needsMicrophone && !hasVoicePermissions())) {
            console.log('权限未被授予，跳过页面跳转');
            Alert.alert(
              '请授予相机权限',
              '',
              [
                { text: '确定', onPress: () => console.log('确定') },
              ],
              { cancelable: false }
            );
            return;
          }


        // 传递参数示例
        navigation.navigate('Camera', {
          mode
        });
    };

    return (
       <View style={styles.container}>
        <TouchableOpacity
          style={[styles.button, styles.primary]}
          onPress={()=>handleOpenCamera()}
        >
          <Text style={styles.buttonText}>打开相机</Text>
        </TouchableOpacity>
         <TouchableOpacity
          style={[styles.button, styles.secondary]}
         onPress={()=>handleOpenCamera(['NoPic'])}
        >
          <Text style={styles.buttonText}>打开相机(无画面)</Text>
        </TouchableOpacity>
        <TouchableOpacity
           style={[styles.button, styles.warning]}
          onPress={()=>handleOpenCamera(['NoVoice'])}
        >
          <Text style={styles.buttonText}>打开相机(无声音)</Text>
        </TouchableOpacity>
         <TouchableOpacity
          style={[styles.button, styles.danger]}
          onPress={()=>handleOpenCamera(['NoPic','NoVoice'])}
        >
          <Text style={styles.buttonText}>打开相机(无画面无声音)</Text>
        </TouchableOpacity>
      </View>
    );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
         initialRouteName="Home"
          screenOptions={{
            headerStyle: { backgroundColor: 'tomato' },
          }}
      >
      <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: '首页' }}
        />
      <Stack.Screen name="Camera" component={CameraScreen} options={{ title: '' }}/>
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
      backgroundColor: '#f5f5f5',
    },
    button: {
      width: '80%', // 占据80%宽度
      paddingVertical: 16,
      paddingHorizontal: 20,
      borderRadius: 12,
      marginBottom: 15, // 按钮之间的间距
      elevation: 5, // Android 阴影
      shadowColor: '#000', // iOS 阴影
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 6,
      justifyContent: 'center',
      alignItems: 'center',
    },
    buttonText: {
      color: '#fff',
      fontSize: 16,
      fontWeight: '600',
      letterSpacing: 0.5,
    },
    primary: {
      backgroundColor: '#007BFF', // 蓝色 - 默认模式
    },
    secondary: {
      backgroundColor: '#FFA500', // 橙色 - 无画面
    },
    warning: {
      backgroundColor: '#FF5722', // 橘红色 - 无声音
    },
    danger: {
      backgroundColor: '#E91E63', // 粉红色 - 无画面无声音
    },
});

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
